<template>
	<view class="enter-shop">
		<NavBar title="店铺详情"/>
		<view class="content">
			<view class="user-info">
				<view class="item">
					<view class="label"> 联系人姓名 </view>
					<view class="value"> {{shop.contacts}} </view>
				</view>
				<view class="item">
					<view class="label"> 联系人电话 </view>
					<view class="value"> {{shop.mobile}} </view>
				</view>
			</view>
			<view class="shop-info">
				<view class="item">
					<view class="label"> 商家名称 </view>
					<view class="value"> {{shop.name}} </view>
				</view>
				<view class="item">
					<view class="label"> 商家描述 </view>
					<view class="value"> {{shop.describe_text}} </view>
				</view>
				<view class="item">
					<view class="label"> 主营类目 </view>
					<view class="value"> {{shop.category_name}} </view>
				</view>
				<view class="item">
					<view class="label"> 店铺坐标 </view>
					<view class="value"> {{shop.region}} </view>
				</view>
				<view class="item">
					<view class="label"> 店铺地址 </view>
					<view class="value"> {{shop.detail_address}} </view>
				</view>
				<view class="item">
					<view class="label"> 客服电话 </view>
					<view class="value"> {{shop.help_mobile}} </view>
				</view>
			</view>
			<view class="shop-intro">
				<view class="item">
					<view class="label"> 商家简介 </view>
				</view>
				<view class="intro">
					<view class="value"> {{shop.intro}} </view>
				</view>
			</view>
			<view class="shop-logo">
				<text class="title"> 商家logo </text>
				<view class="img" @tap="previewImg([shop.logo_path])">
					<image :src="shop.logo_path" class="i-img"/>
				</view>
			</view>
			<view class="shop-img" v-if="shop.type==2">
				<text class="title"> 商家门店照片(3-5张) </text>
				<view class="img" @tap="previewImg(shop.head_imgs_path)">
					<image :src="item" v-for="item in shop.head_imgs_path" :key="item" class="i-img"/>
				</view>
			</view>
			<view class="zmcl">
				<text class="title"> 证明材料(营业执照) </text>
				<view class="img img-box" @tap="previewImg(shop.business_license_path)">
					<image :src="item" v-for="item in shop.business_license_path" :key="item" class="i-img"/>
				</view>
			</view>
			<view class="status">
				<view class="item">
					<view class="label"> 状态 </view>
					<view class="value"> {{shop.status=='review'?'待审核':shop.status=='checked'?'已通过':'已驳回'}}  </view>
				</view>
				<view class="item">
					<view class="label"> 提交时间 </view>
					<view class="value"> {{shop.create_time}} </view>
				</view>
			</view>
		</view>
		<view class="btn-box" v-if="shop.status == 'review'">
			<view class="btn" @tap="modalRef.open()"> 审核驳回 </view>
			<view class="btn" @tap="shopResolve"> 审核通过 </view>
		</view>
		<Modal ref="modalRef" title="驳回原因" textarea="请填写驳回理由" @confirm="shopReject"/>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad} from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Modal from '@/components/Modal.vue'
	import { previewImg } from '@/utils/index.js'
	import { GetShopInviteDetailsApi, SetShopInviteStatusApi } from '@/service/agent.js'
	const modalRef = ref()
	const shop = ref({})
	const getShopInfo = (id) => {
		GetShopInviteDetailsApi({id}).then(res => {
			shop.value = res
		})
	}
	// 通过
	const shopResolve = () => {
		const params = {
			id: shop.value.id,
			status: 1,
			username: shop.value.mobile,
			password: 'xg12345678'
		}
		SetShopInviteStatusApi(params).then(res => {
			getApp().globalData.toast('操作成功')
			uni.navigateBack()
		})
	}
	// 驳回
	const shopReject = (val) => {
		const params = {
			id: shop.value.id,
			status: 2,
			reject_msg: val
		}
		SetShopInviteStatusApi(params).then(res => {
			getApp().globalData.toast('操作成功')
			uni.navigateBack()
		})
	}
	onLoad((e) => {
		const { id } = e
		getShopInfo(id)
	})
</script>

<style lang="scss" scoped>
	.enter-shop {
		padding-bottom: 60px;
		.content {
			width: 100%;
			padding: 10px 12px;
			box-sizing: border-box;
			.user-info, .shop-info,.shop-intro, .status {
				padding: 0 16px;
				border-radius: 10px;
				background-color: #fff;
				margin-bottom: 10px;
				.item {
					height: 50px;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #eeeeee;
					box-sizing: border-box;
					&:nth-last-of-type(1) {
						border-bottom: 0;
					}
					.label {
						color: #333333;
						font-size: 16px;
					}
					.value {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
			.shop-intro {
				.item {
					height: 40px;
					border-bottom: 0;
					padding-top: 16px;
				}
				.intro {
					padding: 5px 0 10px;
					.value {
						width: 100%;
						font-weight: 400;
						font-size: 14px;
						color: #C4C4C4;
						line-height: 20px;
					}
				}
			} 
			.shop-logo, .shop-img, .zmcl{
				padding: 20px 16px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				box-sizing: border-box;
				.title {
					color: #333333;
					font-size: 16px;
				}
				.img {
					margin-top: 15px;
					.i-img {
						width: 74px;
						height: 74px;
						margin-right: 20px;
						border-radius: 10px;
					}
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 50px;
			padding: 0 12px;
			background-color: #fff;
			.btn {
				width: 168px;
				height: 40px;
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 40px;
				text-align: center;
				border-radius: 99px;
				box-sizing: border-box;
				border: 1px solid #999999;
				&:nth-last-of-type(1) {
					border: none;
					color: #FFFFFF;
					background: #FF3B1E;
				}
			}
		}
	}
</style>
